<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>交通流量</title>
		<style type="text/css">
			html {
				height: 100%
			}

			body {
				height: 100%;
				margin: 0px;
				padding: 0px
			}

			#container {
				height: 100%
			}

			ul li {
				list-style: none;
			}

			.btn-wrap {
				z-index: 999;
				position: fixed;
				top: 0;
				margin-left: 15px;
				padding: 10px;
				border-radius: 10px;
				background-color: transparent;
				box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
			}

			.btn {
				width: 75px;
				height: 30px;
				float: left;
				background-color: #fff;
				color: rgba(27, 142, 236, 1);
				font-size: 14px;
				border: 1px solid rgba(27, 142, 236, 1);
				border-radius: 5px;
				margin: 0 5px;
				text-align: center;
				line-height: 30px;
			}

			.btn:active {
				background-color: rgba(27, 142, 236, 0.8);
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id='container'></div>
		<ul class="btn-wrap" style="z-index: 99;">
			<li class="btn" id="addTraffic">叠加路况</li>
			<li class="btn" id="deleteTraffic">删除路况</li>
		</ul>
	</body>
	<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件 -->
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

	<!-- 百度地图 -->

	<script type="text/javascript"
		src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=Af6FfpOOZrHT1Ff2enuUKMZgjz4NfQ3W"></script>

	<!-- 示例文档 -->
	<!-- https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/show -->

	<script type="text/javascript">
		// 移动端实现hover效果
		document.body.addEventListener('touchstart', function() {});

		document.addEventListener('UniAppJSBridgeReady', function() {
			// 配置百度地图
			var map = new BMapGL.Map("container"); // 创建地图实例
			var point = new BMapGL.Point(108.970588, 34.224352); // 创建点坐标
			var opts = {
				offset: new BMapGL.Size(10, 40)
			}
			var scaleCtrl = new BMapGL.ScaleControl(opts); // 添加比例尺控件
			map.addControl(scaleCtrl);
			var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
			map.addControl(zoomCtrl);
			map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
			map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别

			var geolocation = new BMapGL.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMapGL.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
					// console.log('您的位置：' + r.point.lng + ',' + r.point.lat);
				} else {
					alert('failed' + this.getStatus());
				}
			});

			function addRouteType() {
				map.setTrafficOn(); // 叠加路况图层
			}

			function removeRouteType() {
				map.setTrafficOff(); // 关闭路况图层
			}

			document.getElementById('addTraffic').addEventListener('click', function(e) {
				addRouteType();
			});
			document.getElementById('deleteTraffic').addEventListener('click', function(e) {
				removeRouteType();
			});
		});
	</script>
</html>
